@import '@/styles/mixins.less';

@textColor: #73747d;
.wh(@width: 100%, @height: 100%) {
    width: @width;
    height: @height;
}

#camera_chart_warp {
    .wh();
}
.header {
    .wh(100%, 32px);
    .mixin_flex(flex, space-between, center);
    .toggle_print {
        .operate_icon {
            margin-right: 8px;
            color: var(--body-text-color);
            cursor: pointer;
            &.active, &:hover {
                color: var(--a-primary-hover-color);
            }
            &.last_icon {
                margin-left: 8px;
                margin-right: 0px;
            }
        }
        >span {
            margin: 5px;
            color: var(--body-text-color);
        }
        .operate_tooltip {
            display: inline-block;
            position: relative;
            margin-left: 5px;
            img {
                position: absolute;
                top: 100%;
                right: 0;
                z-index: 99;
                width: 650px;
                display: none;
                box-shadow: 0px 0px 5px 2px #c6c4c4;
            }
            &:hover {
                img {
                    display: block;
                }
            }
        }
        // >span:last-child {
        //     margin-left: 10px;
        // }
        // &:nth-child(3) {
        //     margin-left: 10px
        // }
    }
}
.camera_charts {
    .wh(100%, calc(100% - 32px));
    position: relative;
    display: flex;
    flex-direction: column;

    .chart_title {
        position: absolute;
        top: 5px;
        left: 0px;
        font-size: 14px;
        font-weight: 500;
        color: var(--body-text-color);
    }
    #top_time_svg {
        width: 100%;
    }
    .chart_warp_line_text {
        font-size: 10px;
    }
    .chart_warp_line_rect {
        fill: #FFFFFF00;
        cursor: pointer;
    }
    .chart_warp_line {
        stroke-width: 1px;
    }
    .dash_line {
        stroke-width: 1px;
        stroke-dasharray: 5, 2;
    }
    .main_chart {
        .wh(100%, calc(100% - 56px));
        overflow-y: auto;
        margin-bottom: 10px;
    }
    #camera_svg {
        width: 100%;
        #chart_warp {
            .wh();
        }
        .left_name_warp {
            &:hover {
                .left_name {
                    stroke: var(--a-primary-hover-color);
                }
            }
        }
        .left_name {
            font-size: 12px;
            font-weight: 100;
            stroke: #bababa;
            cursor: pointer;
            &:hover {
                stroke: var(--a-primary-hover-color);
            }
            &.active {
                stroke: var(--a-primary-hover-color);
            }
        }
        .event_dash {
            stroke-width: 1px;
            cursor: pointer;
            &.dash_line {
                stroke-dasharray: 5, 2;
            }   
        }
        .event_dash_rect {
            stroke-width: 1px;
            fill: #FFFFFF00;
            cursor: pointer;
        }
        .event_dash_warp {
            &:hover {
                .event_dash {
                    stroke-width: 4px;
                }
                .event_dash_rect {
                    // fill: #FFFFFFCC;
                    fill: var(--event-dash-rect-hover-color);
                    stroke: #d9d9d9;
                    filter: drop-shadow(0px 0px 2px #cccccc);
                }
            }
        }
        .start_icon {
            fill: #FEF3E6;
            stroke: #E97A00;
        }
        .event_warp {
            cursor: pointer;
        }
        .event_rect_left_line {
            stroke-width: 4px;
        }
        .event_rect_left_text {
            font-size: 12px;
            font-weight: 200;
            pointer-events: none;
        }
        .event_rect_small_text {
            font-size: 9px;
            font-weight: 200;
            pointer-events: none;
        }
        .event_num_rect {
            cursor: pointer;
            fill: #FFFFFF;
            stroke: #dcdcdc;
            &.disabled {
                cursor: not-allowed;
                fill: #f5f5f5;
            }
        }
        .event_num_text {
            font-size: 10px;
            font-weight: 200;
            stroke: #333333;
            pointer-events: none;
            &.disabled {
                stroke: #c7c7c7;
            }
        }
        .trace_line {
            stroke-width: 2px;
            stroke: #3d3d3d;
        }
        .trace_line_rect {
            fill: var(--trace-line-rect-color);
            cursor: pointer;
        }
        .javalock_rect {
            fill: #fffde280;
            stroke: #c0b81c;
        }
        .javalock_text {
            font-size: 12px;
            font-weight: 100;
            stroke: #c0b81c;
        }
        .log_icon {
            // fill: #E6F4F5;
            stroke: #1291A2;
        }
        .span_event_rect {
            fill: #FFFFFF00;
            stroke-dasharray: 4, 3;
            stroke-width: 2;
            stroke: #e97a00;
        }
    }
    .tooltip_line_warp {
        .tooltip_line_rect {
            opacity: 0;
        }
        .tooltip_line_text {
            font-size: 10px;
            font-weight: 100;
            stroke: var(--body-text-color);
        }
        .tooltip_line {
            stroke-dasharray: 4, 3;
            stroke: #828282;
            stroke-width: 1px;
        }
    }
    .bottom_xaxis_warp {
        height: 46px;
        #bottom_xaxis_svg {
            .wh();
        }
        .xaxis_span_line {
            stroke: #e97a00;
            stroke-width: 3px;
        }
    }
    
    #legend_warp {
        .legend_name {
            cursor: pointer;
            &:hover {
                text {
                    fill: #0f8ff8;
                }
            }
        }
    }
    .camera_tooltip {
        min-width: 120px;
        min-height: 32px;
        border-radius: 5px;
        background-color: #FFFFFF;
        box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
        position: absolute;
        top: 300px;
        left: 100px;
        z-index: 10;
        display: none;
        transform: translate(-110%, -50%);
        &.show_toolip {
            display: block;
        }
        &.hide_toolip {
            display: none;
        }
        // &::after {
        //     position: absolute;
        //     top: 100%;
        //     left: 50%;
        //     content: ' ';
        //     transform: translateX(-50%);
        //     border: 6px solid transparent;
        //     border-top: 6px solid #898989;
        // }
    }
    .tooltip_events {
        .mixin_ul();
        max-height: 180px;
        overflow-y: auto;
        li {
            .mixin_li(24px, 2px 8px, pointer);
        }
    }
    #xAxis_warp {
        .xAxis_rect {
            fill: #ffffff;
            stroke: #d1dbee;
            stroke-width: 1px;
        }
        .xAxis_warp_line {
            stroke-width: 1px;
        }
        .xaxis-x {
            stroke: @textColor;
            font-weight: 100;
        }
        .selection {
            fill: var(--xaxis-selection-color);
            stroke: #acb8d1;

        }
        .handle-text {
            stroke: @textColor;
            stroke-width: 1px;
            font-size: 10px;
            font-weight: 100;
        }
        .xaxis_circle {
            fill: #FFFFFF;
            stroke: #0f8ff8;
            stroke-width: 2px;
        }
    }
    
    #span_chart {
        width: 100%;
        height: 95%;
        overflow-y: auto;
    }
    #span_svg {
        width: 100%;
        .circle_symbol {
            fill: #FFFFFF;
            stroke: #333333;
        }
        .span_title {
            font-size: 12px;
            font-weight: 100;
            stroke: #828282;
        }
        .span_title_line {
            stroke: #828282;
            stroke-width: 1px;
            fill: none;
        }
        .span_rect_bg {
            fill: #f5f5f5;
            cursor: pointer;
        }
        .span_rect {
            cursor: pointer;
        }
        .span_rect_text {
            font-size: 11px;
            stroke: #4b4b4b;
            pointer-events: none;
            font-weight: 100;
        }
    }
}

.empty_span_warp {
    width: 100%;
    text-align: center;
    padding: 30px;
    .empty_span_text {
        text-indent: 2em;
        margin-bottom: 10px;
    }
}


@keyframes on_glowing {  
    0% { fill: #FDE6E4; }
    50% { fill: #F68F85; }
    100% { fill: #FDE6E4; }
}
.on_shining {
    -webkit-animation: on_glowing 1000ms infinite !important;
    -moz-animation: on_glowing 1000ms infinite  !important;
    -o-animation: on_glowing 1000ms infinite  !important;
    animation: on_glowing 1000ms infinite  !important;
}

@keyframes futex_glowing {  
    0% { fill: #E6F4F5; }
    50% { fill: #6CEEFE; }
    100% { fill: #E6F4F5; }
}
.futex_shining {
    -webkit-animation: futex_glowing 1000ms infinite !important;
    -moz-animation: futex_glowing 1000ms infinite  !important;
    -o-animation: futex_glowing 1000ms infinite  !important;
    animation: futex_glowing 1000ms infinite  !important;
}

@keyframes file_glowing {  
    0% { fill: #EDE4FF; }
    50% { fill: #BC9AFC; }
    100% { fill: #EDE4FF; }
}
.file_shining {
    -webkit-animation: file_glowing 1000ms infinite !important;
    -moz-animation: file_glowing 1000ms infinite  !important;
    -o-animation: file_glowing 1000ms infinite  !important;
    animation: file_glowing 1000ms infinite  !important;
}

@keyframes net_glowing {  
    0% { fill: #FEF3E6; }
    50% { fill: #FABD79; }
    100% { fill: #FEF3E6; }
}
.net_shining {
    -webkit-animation: net_glowing 1000ms infinite !important;
    -moz-animation: net_glowing 1000ms infinite  !important;
    -o-animation: net_glowing 1000ms infinite  !important;
    animation: net_glowing 1000ms infinite  !important;
}

@keyframes other_glowing {  
    0% { fill: #E5E5E5; }
    50% { fill: #A6A2A2; }
    100% { fill: #E5E5E5; }
}
.other_shining {
    -webkit-animation: other_glowing 1000ms infinite !important;
    -moz-animation: other_glowing 1000ms infinite  !important;
    -o-animation: other_glowing 1000ms infinite  !important;
    animation: other_glowing 1000ms infinite  !important;
}

@keyframes lock_glowing {  
    0% { fill: #fffde280; }
    50% { fill: #ECE45480; }
    100% { fill: #fffde280; }
}
.lock_shining {
    -webkit-animation: lock_glowing 1000ms infinite !important;
    -moz-animation: lock_glowing 1000ms infinite  !important;
    -o-animation: lock_glowing 1000ms infinite  !important;
    animation: lock_glowing 1000ms infinite  !important;
}


@keyframes event_span_glowing {  
    0% { stroke: #FFFFFF00; }
    50% { stroke: #e97a00; }
    100% { stroke: #FFFFFF00; }
}
.event_span_shining {
    -webkit-animation: event_span_glowing 1000ms infinite !important;
    -moz-animation: event_span_glowing 1000ms infinite  !important;
    -o-animation: event_span_glowing 1000ms infinite  !important;
    animation: event_span_glowing 1000ms infinite  !important;
}